<template>
  <div class="banner">
    <div class="xbx ban-ner">
      <div class="ban">
        <div class="ban_l" @mouseover="mouseover" @mouseout="mouseout">
          <ul>
            <li
              v-for="(item, index) in BannerList"
              :key="index"
              v-show="index == n"
            >
              <a href="">
                <img :src="item.imageUrl" alt="" />
              </a>
            </li>
          </ul>
        </div>
        <div class="ban_r" @click="$router.push('/download')">
          <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
        </div>
      </div>
      <div class="ban_left" @click="next('left')"></div>
      <div class="ban_right" @click="next('right')"></div>

      <ul class="for" @mouseover="mouseover" @mouseout="mouseout">
        <li
          :class="i == n ? 'active' : ''"
          v-for="(v, i) in BannerList"
          :key="i"
          @mouseover="text(i)"
        ></li>
      </ul>
    </div>
    <!-- <div
        class="bigimg"
        :style="{ 'background-image': 'url(' + listdata + ')' }"
      ></div> -->
  </div>
</template>

<script>
import { BannerListApi } from "@/request/api";
export default {
  data() {
    return {
      //获取轮播图列表信息
      BannerList: [],
      // //背景图
      // listdata: "",
      // 初始化n
      n: 0,
      falg: false,
      //url
      url: "http://localhost:3000",
    };
  },
  methods: {
    // selectImg(x) {
    //   this.listdata = this.BannerList[x].imageUrl;
    // },
    //轮播订时器
    go() {
      this.timer = setInterval(() => {
        this.n++;
        if (this.n == this.BannerList.length) {
          this.n = 0;
        }
        // this.selectImg(this.n);
      }, 2000);
    },

    //下一张
    next(e) {
      if (e == "left") {
        if (this.n == 0) {
          this.n = this.BannerList.length;
        }
        this.n--;
      }
      if (e == "right") {
        this.n++;
        if (this.n == this.BannerList.length) {
          this.n = 0;
        }
      }
    },
    //鼠标移上取消定时器，停止轮播
    mouseover() {
      clearInterval(this.timer);
    },
    //鼠标离开开启定时器，开始轮播
    mouseout() {
      this.go();
    },
    //轮播小圆点
    text(i) {
      this.n = i;
      // this.selectImg(this.n);
    },
    //小圆点下一张
    leave() {
      this.falg = !this.falg;
    },
  },
  //发送数据请求
  created() {
    BannerListApi().then((res) => {
      // console.log(res);
      if (res.data.code === 200) {
        this.BannerList = res.data.banners;
        //  console.log(this.BannerList);
      }
    });
    this.go();
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.banner {
  margin-bottom: 20px;
  .ban-ner {
    position: relative;
    height: 286px;
    .ban {
      display: flex;
      justify-content: space-between;
      .ban_l {
        width: 730px;
        height: 286px;
        display: flex;
        justify-content: flex-start;
        ul {
          width: 730px;
        }
        li {
          width: 730px;
          img {
            width: 730px;
            height: 286px;
          }
        }
      }
      .ban_r {
        width: 250px;
        height: 287px;
        background: url("../assets/images/download.png") no-repeat;
        display: flex;
        align-items: flex-end;
        cursor: pointer;
        box-sizing: border-box;
        p {
          width: 254px;
          margin: 10px auto;
          text-align: center;
          color: #8d8d8d;
          font-size: 12px;
        }
      }
    }
    .ban_left {
      width: 37px;
      height: 63px;
      background: url("../assets/images/banner.png");
      background-position: 0 -430px;
      position: absolute;
      left: -55px;
      top: 121px;
    }
    .ban_right {
      width: 37px;
      height: 63px;
      background: url("../assets/images/banner.png");
      background-position: 0 -578px;
      position: absolute;
      top: 121px;
      right: -55px;
    }
  }
}
.bigimg {
  width: 100%;
  height: 285px;
  position: absolute;
  top: 0;
  z-index: -1;
  background-size: 6000000px;
  background-position: center center;
  filter: blur(40 * 20);
  opacity: 0.5;
  transition: all 0.5s;
  overflow: hidden;
}

.for {
  display: flex;
  position: absolute;
  left: 40%;
  bottom: 10px;
}

.for li {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 100%;
  margin-left: 5px;
  opacity: 0.5;
}

.active {
  background: red !important;
}
</style>